<template>
    <div class="Allhtml">
        <zlj-header msg="体检项管理"></zlj-header>
        <div class="All">
            <div class="center">
                <div class="datatext">
                    <p>数据筛选</p>
                </div>
                <div class="from">
                    <el-form :inline="true" :model="searchData" class="demo-form-inline">
                        <el-form-item label="输入查询:" class="searinp" :model="searchData">
                            <el-input class="searchinp" v-model="searchData.name" placeholder="请输入项目名称" clearable />
                        </el-form-item>
                        <el-form-item label="适用地区:" class="area">
                            <el-select v-model="searchData.selectedProvince" placeholder="省份" clearable class="pullmenu1"
                                :model="searchData">
                                <el-option :label="option.provinceName" :value="option.provinceId" :key="option.provinceId"
                                    v-for="option in provData" @click="handleOptionClick(option.provinceId)"
                                    v-model="searchData.selectedProvince" />
                            </el-select>
                            <el-select v-model="searchData.selectedCity" placeholder="市区" clearable class="pullmenu2"
                                :model="searchData">
                                <el-option :label="v.cityName" :value="v.cityId" v-for="v in cityStr"
                                    @click="organBtn(v.cityId)" v-model="searchData.selectedCity" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="适用机构:" class="orangnization">
                            <el-select v-model="searchData.selectedOrgan" placeholder="全部" clearable class="pullmenu1"
                                :model="searchData">
                                <el-option :label="v.organName" :value="v.organId" v-for="v in cityorganData"
                                    v-model="searchData.selectedOrgan" @click="organIdBtn(v.organId)" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form>
                        <el-form-item class="twobutton">
                            <el-button type="primary" @click="onSearch">查询</el-button>
                            <el-button @click="onReset" class="reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 表格部分 -->
            <div class="eltable">
                <div class="nextbtn">
                    <el-button @click="dialogFormVisible = true">添加</el-button>
                    <el-button @click="delLot">删除</el-button>
                    <el-button @click="onSubmit">导入</el-button>
                </div>
                <div class="eltable">
                    <el-table ref="multipleTableRef" :data="tableData" border stripe style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" style="background-color: #eee;" />
                        <el-table-column property="id" label="项目ID" align="center" />
                        <el-table-column property="name" label="项目名称" align="center" />
                        <el-table-column property="originalPrice" label="原价" align="center" />
                        <el-table-column property="currentPrice" label="售价" align="center" />
                        <el-table-column property="cityName" label="适用地区" align="center">
                            <template #default="scope">
                                {{ scope.row.provinceName }},{{ scope.row.cityName }}
                            </template>
                        </el-table-column>

                        <el-table-column property="status" label="是否启用" show-overflow-tooltip align="center">
                            <template #default="scope">
                                {{ scope.row.status === 0 ? '未启动' : '启动' }}
                            </template>
                        </el-table-column>
                        <el-table-column property="orderNumber" label="订购数量" align="center" />
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button class="colorBtn" link type="primary" size="small"
                                    @click="handleClick(scope.row)">编辑</el-button>
                                <el-popconfirm @confirm="delBtn(scope.row)" title="确定要删除吗">
                                    <template #reference>
                                        <el-button class="colorBtn" link type="primary" size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="20"
                        :pager-count="10" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <!-- 新增弹框 -->
        <div class="addDioalog">
            <el-dialog v-model="dialogFormVisible" title="新增体检项" style="width: 72.6rem; height: 38.3rem;"
                custom-class="custom-dialog">
                <el-form class="dialogFrom">
                    <el-form :model="addData" class="fromLeft">
                        <el-form-item label="体检名称:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="addData.name" autocomplete="off" placeholder="请输入体检项名称"
                                style="height: 2.9rem; width:21rem" />
                        </el-form-item>
                        <el-form-item label="体检项ID:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="addData.id" autocomplete="off" placeholder="系统自动生成"
                                style="height: 2.9rem; width:21rem" disabled />
                        </el-form-item>
                        <el-form-item label="是否启用:" :label-width="'6rem'" class="required-label">
                            <el-switch v-model="addData.status" class="ml-2">
                                <template #default="scope">
                                    {{ scope.row.status === 0 ? '未启动' : '启动' }}
                                </template>
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="适用标签:" :label-width="'6rem'" class="tag required-label" v-model="addData.tags">
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[0] }" @change="onChange(0)"
                                type="info">男性项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[1] }" @change="onChange(1)"
                                type="info">女性项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[2] }" @change="onChange(2)"
                                type="info">已婚项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[3] }" @change="onChange(3)"
                                type="info">未婚项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[4] }" @change="onChange(4)"
                                type="info">不区分性别</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[5] }" @change="onChange(5)"
                                type="info">不区分婚否</el-check-tag>
                        </el-form-item>
                        <el-form-item label="原价:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="addData.originalPrice" autocomplete="off"
                                style="height: 2.9rem; width:21rem" />
                        </el-form-item>
                        <el-form-item label="售价:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="addData.currentPrice" autocomplete="off"
                                style="height: 2.9rem; width:21rem" />
                        </el-form-item>
                    </el-form>
                    <el-form :model="addData" class="fromRight">
                        <el-form-item label="适用地区:" class="area required-label">
                            <el-select v-model="searchData.selectedProvince" placeholder="省份" clearable class="pullmenu11 "
                                :model="searchData">
                                <el-option :label="option.provinceName" :value="option.provinceId" :key="option.provinceId"
                                    v-for="option in provData" @click="handleOptionClick(option.provinceId)"
                                    v-model="searchData.selectedProvince" />
                            </el-select>
                            <el-select v-model="searchData.selectedCity" placeholder="市区" clearable class="pullmenu22"
                                :model="searchData">
                                <el-option :label="v.cityName" :value="v.cityId" v-for="v in cityStr"
                                    @click="organBtn(v.cityId)" v-model="searchData.selectedCity" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="适用机构:" class="orangnization required-label">
                            <el-select v-model="searchData.selectedOrgan" placeholder="全部" clearable class="pullmenu1 "
                                :model="searchData">
                                <el-option :label="v.organName" :value="v.organId" v-for="v in cityorganData"
                                    v-model="searchData.selectedOrgan" @click="organIdBtn(v.organId)" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分支机构:" class="frame required-label" :label-width="'6rem'">

                            <el-transfer @change="transformBtn" filterable filter-placeholder="请输入内容" :data="dataG"
                                v-model="addData.itemOrgans" :titles="['机构列表', '已选机构']" />
                        </el-form-item>
                    </el-form>
                </el-form>
                <el-form class="textareaFrom" :model="addData">
                    <el-form-item label="检查范围:" :label-width="'8rem'" class="required-label">
                        <el-input v-model="addData.examinationScope" type="textarea" :label-width="'8rem'" />
                    </el-form-item>
                    <el-form-item label="检查意义:" :label-width="'8rem'" class="required-label">
                        <el-input v-model="addData.examinationMeaning" type="textarea" :label-width="'8rem'" />
                    </el-form-item>
                    <el-form-item label="注意事项:" :label-width="'8rem'">
                        <el-input v-model="addData.attention" type="textarea" :label-width="'8rem'" />
                    </el-form-item>
                </el-form>
                <template #footer class="footer">
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="addSure">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <!-- 编辑弹框 -->
        <div class="addDioalog">
            <el-dialog v-model="editVisible" title="编辑体检项" style="width: 72.6rem; height: 38.3rem;"
                custom-class="custom-dialog">
                <el-form class="dialogFrom">
                    <el-form :model="editData" class="fromLeft">
                        <el-form-item label="体检名称:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="editData.name" autocomplete="off" placeholder="请输入体检项名称"
                                style="height: 2.9rem; width:21rem" />
                        </el-form-item>
                        <el-form-item label="体检项ID:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="editData.id" autocomplete="off" placeholder="系统自动生成"
                                style="height: 2.9rem; width:21rem" disabled />
                        </el-form-item>
                        <el-form-item label="是否启用:" :label-width="'6rem'" class="required-label">
                            <el-switch v-model="editData.status" class="ml-2">
                                <template #default="scope">
                                    {{ scope.row.status === 0 ? '未启动' : '启动' }}
                                </template>
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="适用标签:" :label-width="'6rem'" class="tag required-label"
                            v-model="editData.tagIds">
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[0] }" @change="onChange(0)"
                                type="info">男性项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[1] }" @change="onChange(1)"
                                type="info">女性项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[2] }" @change="onChange(2)"
                                type="info">已婚项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[3] }" @change="onChange(3)"
                                type="info">未婚项目</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[4] }" @change="onChange(4)"
                                type="info">不区分性别</el-check-tag>
                            <el-check-tag :class="{ 'ml-2': true, 'selected': chooseChecked[5] }" @change="onChange(5)"
                                type="info">不区分婚否</el-check-tag>
                        </el-form-item>
                        <el-form-item label="原价:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="editData.originalPrice" autocomplete="off"
                                style="height: 2.9rem; width:21rem" />
                        </el-form-item>
                        <el-form-item label="售价:" :label-width="'6rem'" class="required-label">
                            <el-input v-model="editData.currentPrice" autocomplete="off"
                                style="height: 2.9rem; width:21rem" />
                        </el-form-item>
                    </el-form>
                    <el-form :model="editData" class="fromRight">
                        <el-form-item label="适用地区:" class="area">
                            <el-select v-model="searchData.selectedProvince" placeholder="省份" clearable class="pullmenu11"
                                :model="searchData">
                                <el-option :label="option.provinceName" :value="option.provinceId" :key="option.provinceId"
                                    v-for="option in provData" @click="handleOptionClick(option.provinceId)"
                                    v-model="searchData.selectedProvince" />
                                <!-- //searchData.selectedProvince -->
                            </el-select>
                            <el-select v-model="searchData.selectedCity" placeholder="市区" clearable class="pullmenu22"
                                :model="searchData">
                                <el-option :label="v.cityName" :value="v.cityId" v-for="v in cityStr"
                                    @click="organBtn(v.cityId)" v-model="searchData.selectedCity" />
                                <!-- searchData.selectedCity -->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="适用机构:" class="required-label">
                            <el-select v-model="searchData.selectedOrgan" placeholder="全部" clearable :model="searchData">
                                <el-option :label="v.organName" :value="v.organId" v-for="v in cityorganData"
                                    v-model="searchData.selectedOrgan" @click="organIdBtn(v.organId)" />
                                <!-- searchData.selectedOrgan -->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分支机构:" class="frame required-label" :label-width="'6rem'">
                            <el-transfer v-model="editData.itemOrgans" filterable filter-placeholder="请输入内容" :data="dataG"
                                :titles="['机构列表', '已选机构']">
                            </el-transfer>
                        </el-form-item>
                    </el-form>
                </el-form>
                <el-form class="textareaFrom" v-model="editData">
                    <el-form-item label="检查范围:" :label-width="'8rem'" class="required-label">
                        <el-input v-model="editData.examinationScope" type="textarea" :label-width="'8rem'" />
                    </el-form-item>
                    <el-form-item label="检查意义:" :label-width="'8rem'" class="required-label">
                        <el-input v-model="editData.examinationMeaning" type="textarea" :label-width="'8rem'" />
                    </el-form-item>
                    <el-form-item label="注意事项:" :label-width="'8rem'">
                        <el-input v-model="editData.attention" type="textarea" :label-width="'8rem'" />
                    </el-form-item>
                </el-form>
                <template #footer class="footer">
                    <span class="dialog-footer">
                        <el-button @click="editVisible = false">取消</el-button>
                        <el-button type="primary" @click="editSure">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
// import { ElMessage, ElMessageBox } from 'element-plus'
// import 'element-plus/theme-chalk/el-loading.css';
// import 'element-plus/theme-chalk/el-message.css';
// import { examinationApi } from '../apis/examination';
import { examinationApi, addExamination, editExamination, editDataid, deleteId, deleteAll } from '../apis/examination'
import { provApi, cityApi, branchData, cityOragn } from '../apis/provAll'
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const value2 = ref(true);
//市的定义
// let selectedCity = ref('')
let cityStr = reactive([])
//省份定义
// const selectedProvince = ref('')
const provData = reactive([])
//机构定义
// let selectedOrgan = ref('')
let cityorganData = reactive([])
//页面渲染
const total = ref(0);
const searchData = reactive(
    {
        name: '',
        selectedOrgan: '',
        selectedProvince: '',
        selectedCity: '',
    }
);
let provinceId = ref()
let cityId = ref()
let OrganId = ref()

//省份接口渲染
const prov1 = async (v) => {
    // provinceId = v
    const { data } = await provApi()
    if (data.code == 0) {
        provData.push(...data.data)
    }
    organData();
}
prov1();
const organIdBtn = (v) => {
    OrganId.value = v
    organData();
}
const onSubmit = () => {
}
//城市接口渲染
const handleOptionClick = (v: any) => {
    provinceId.value = v
    editData.itemOrgans.length = 0
    const cityData = () => {
        cityApi(v).then(({ data }) => {
            if (data.code == 0) {
                cityStr.length = 0;
                cityStr.push(...data.data)
                if (cityStr.length == 0) {
                    searchData.selectedCity = ''
                    cityStr.length = 0
                } else {
                    searchData.selectedCity = cityStr[0].cityName;
                    organBtn(cityStr[0].cityId)
                }
            }
        })
    }
    cityData();
}
//根据市来查询机构接口
const organBtn = (v: number) => {
    cityId.value = v
    editData.itemOrgans.length = 0
    cityOragn(v).then(({ data }) => {
        cityorganData.length = 0
        cityorganData.push(...data.data);
        for (let i = 0; i < data.data.length; i++) {
            a.push(data.data[i].name)
        }
        if (cityorganData.length == 0) {
            cityorganData.length = 0
            searchData.selectedOrgan = ''
        } else {
            searchData.selectedOrgan = cityorganData[0].organName;
            OrganId.value = data.data[0].organId
            organData();
        }
    })
}
//页面渲染
const render = async () => {
    const { data } = await examinationApi(currentPage4.value, pageSize4.value, searchData.name, provinceId.value, cityId.value, OrganId.value)
    console.log(provinceId.value, cityId.value, OrganId.value);

    if (data.code == 0) {
        console.log(data);
        tableData.length = 0;
        total.value = data.count;
        tableData.push(...data.data);
    }
}
render();
//表格数据
let tableData = reactive<dataType[]>([]);
interface dataType {
    id: number,
    name: string,
    originalPrice: number,
    currentPrice: number,
    cityId: number,
    status: number,
    orderNumber: number,
    provinceId: number,
    provinceName: string
    page: number
}
interface User {
    date: string
    name: string
    address: string
}
//批量删除
let multipleIds = reactive([])
const delLot = async (v) => {
    for (let i = 0; i < multipleSelection.value.length; i++) {
        multipleIds.push(multipleSelection.value[i].id);
        let arr = Object.values(multipleIds);
        multipleIds = arr;
    }
    if (multipleSelection.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }
};
const deleteData = async (v) => {
    const { data } = await deleteAll(multipleIds)
    if (data.code == 0) {
        ElMessage.success('删除成功')
        render();
    } else {
        ElMessage.error('删除失败')
    }

}
//表格数据
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const formInline = reactive({
    user: '',
    provinceId: '',
    provinceName: '',
    region: ''
})
//页码
const count = ref(5);
const handleSizeChange = (val: number) => {
    pageSize4.value = val;
    render();
}
const handleCurrentChange = (val: number) => {
    currentPage4.value = val;
    render();
}
//添加数据
let addData = reactive({
    attention: '',
    currentPrice: 0,
    examinationMeaning: '',
    examinationScope: '',
    id: null,
    itemOrgans: [],
    name: '',
    orderNumber: 20,
    originalPrice: null,
    status: null,
    tags: [],
    tagIds: null,
})
const addSure = async () => {
    console.log(addData.itemOrgans);
    const dorm1 = addData.status == true ? 1 : 0
    addData.status = dorm1;
    let wr = []
    chooseChecked.forEach((v, i) => {
        if (v) {
            wr.push(i + 1)
        }
    })
    addData.tags = wr;
    addData.tagIds = wr;
    provinceId.value = null
    cityId.value = null
    OrganId.value = null
    try {
        const { data } = await addExamination(addData);
        if (data.code === 0) {
            ElMessage.success('添加成功');
            dialogFormVisible.value = false;
            render();
        } else {
            ElMessage.error('添加失败');
        }
    } catch (error) {
        console.error(error);
        ElMessage.error('添加失败，发生错误');
    }
};
//修改数据
const editSure = async () => {
    let a = editData.status == true ? 1 : 0;
    editData.status = a;
    const { data } = await editExamination(editData);
    let wr1 = reactive([])
    chooseChecked.forEach((v, i) => {
        if (v) {
            wr1.push(i + 1)
        }
    })
    editData.tags = wr1;

    let wr2 = reactive([]);
    chooseChecked.forEach((v, i) => {
        if (v) {
            wr2.push(i + 1);
        }
    });
    provinceId.value = null
    cityId.value = null
    OrganId.value = null
    editData.tagIds = wr2
    if (data.code == 0) {
        editVisible.value = false;
        ElMessage.success('修改成功');
        render();
    }
};
// 点击编辑获取值
const editData = reactive({
    attention: '',
    currentPrice: 0,
    examinationMeaning: '',
    examinationScope: '',
    id: null,
    itemOrgans: [],
    name: '',
    orderNumber: 20,
    originalPrice: 0,
    status: 0,
    tags: [],
    tagIds: null,
    subName: '',
    provinceName: '',
    cityName: ''
});
const getChoosedOrgan = (v, i, h) => {
    dataG.length = 0
    branchData(v, i).then(({ data: _data }) => {
        a = _data.data.map((item: { name: any; }) => item.name);
        a.forEach((city, index) => {
            dataG.push({
                label: city,
                key: _data.data[index].subId
            })
        })
        dataG.forEach((v) => {
            if (v.label == h) {
                editData.itemOrgans.length = 0;
                editData.itemOrgans.push(v.key)
            }
        })
    })
}
const handleClick = async (v: {
    id: number; currentPrice: number; name: string; orderNumber: number; originalPrice: number; tags: number; tagIds: number; subName: string;
    provinceName: string; cityName: string; organName: string
}) => {
    editVisible.value = true;
    const { data } = await editDataid(v.id)
    if (data.code == 0) {
        let sb = 0;
        let nn = v.tagIds.split(',')
        chooseChecked.forEach((v, i) => {
            if ((i + 1) == nn[sb]) {
                chooseChecked.splice(i, 1, true)
                sb = sb + 2;
            }
        })
        searchData.selectedCity = data.data.cityName;
        searchData.selectedOrgan = data.data.organName;
        searchData.selectedProvince = data.data.provinceName;
        getChoosedOrgan(data.data.cityId, data.data.organId, data.data.subName)
        data.data.organName = a
        data.data.tagIds = sb;
        data.data.status = data.data.status == 1 ? true : false;
        editData.id = v.id;
        editData.currentPrice = v.currentPrice;
        editData.name = v.name;
        editData.orderNumber = v.orderNumber;
        editData.originalPrice = v.originalPrice;
        editData.attention = data.data.attention;
        editData.examinationMeaning = data.data.examinationMeaning;
        editData.examinationScope = data.data.examinationScope;
        editData.status = data.data.status;
        editData.tagIds = data.data.tagIds;
        editData.subName = data.data.subName;
        editData.provinceName = data.data.provinceName;
        editData.cityName = data.data.cityName;
        editData.organName = data.data.organName;
    }
};
//查询
const onSearch = () => {

    render();
    searchData.selectedCity = '';
    searchData.selectedOrgan = '';
    searchData.selectedProvince = '';
}
//重置
const onReset = () => {
    currentPage4.value = 1;
    searchData.name = '';
    searchData.selectedProvince = ''
    searchData.selectedCity = ''
    searchData.selectedOrgan = ''
    OrganId.value = ''
    provinceId.value = ''
    cityId.value = ''
    render()
}
//删除
const delBtn = async (v: { id: any; }) => {
    const { data } = await deleteId(v.id)
    if (data.code == 0) {
        ElMessage.success('删除成功');
        render();
    }
}
//弹框
const dialogFormVisible = ref(false)
const editVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    name: '',
})
//穿梭框、渲染接口
interface Option {
    key: number
    label: string
}
let a = reactive([])
let dataG = reactive([])
const value = ref([])
const organData = () => {
    dataG.length = 0
    editData.itemOrgans.length = 0
    branchData(cityId.value, OrganId.value).then(({ data: _data }) => {
        a = _data.data.map((item: { name: any; }) => item.name);
        a.forEach((city, index) => {
            dataG.push(
                {
                    label: city,
                    key: _data.data[index].subId
                }
            )
        })
    })

};
addData.itemOrgans = []
let transformBtn = (c) => {
    addData.itemOrgans = c
    console.log(addData.itemOrgans, 22222);
}
//省份选择下拉菜单
const cityList = [{
    prov: '',
    citys: [{
        city: '请选择城市',
        name: [{}]
    }]
}]
//标签选择
let chooseChecked = reactive([false, false, false, false, false, false])
const addChoose = reactive([])
const onChange = (item) => {
    // console.log(item);
    switch (item) {
        case 0:
            chooseChecked[0] = !chooseChecked[0];
            chooseChecked[1] = false;
            chooseChecked[4] = false;
            break;
        case 1:
            chooseChecked[1] = !chooseChecked[1];
            chooseChecked[0] = false;
            chooseChecked[4] = false;
            break;
        case 2:
            chooseChecked[2] = !chooseChecked[2];
            chooseChecked[3] = false;
            chooseChecked[5] = false;
            break;
        case 3:
            chooseChecked[3] = !chooseChecked[3];
            chooseChecked[2] = false;
            chooseChecked[5] = false;
            break;
        case 4:
            chooseChecked[0] = false;
            chooseChecked[1] = false;
            chooseChecked[4] = !chooseChecked[4];
            break;
        case 5:
            chooseChecked[2] = false;
            chooseChecked[3] = false;
            chooseChecked[5] = !chooseChecked[5];
            break;
    }
    addChoose.length = 0
    addChoose.push(...chooseChecked.map(value => value ? true : false));
    let array = [...addChoose];
    console.log(chooseChecked, 111);
}
</script>
<style lang="less" scoped>
.selected {
    color: rgb(0, 121, 254);
    border: 1px solid rgb(0, 121, 254);
    background: rgba(0, 121, 254, 0.1);
}

.Allhtml {
    height: 100%
}

.center {
    margin: auto;
    border: 0.1rem solid #e3e1e1;
    height: 9rem;
    margin-left: 1rem;
    margin-right: 1rem;

    .datatext {
        height: 2.4rem;
        font-size: 1.2rem;
        font-weight: bold;
        border-bottom: 0.1rem solid #e3e1e1;

        p {
            margin-left: 1rem;
        }
    }

    .from {

        margin-top: 1.8rem;
        display: flex;
        justify-content: space-between;

        .searinp {
            margin-left: 2rem;
        }

        .searchinp {

            width: 14rem;
        }

        .pullmenu1 {
            width: 7rem;
        }

        .pullmenu2 {
            margin-left: 1rem;
            width: 7rem;
        }
    }
}

.nextbtn {
    margin: auto;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
    margin-left: 0.5rem;
}

.All {
    margin: auto;
    height: 80vh;
    background-color: white;
    margin-left: 1rem;
    margin-top: 1rem;
    margin-right: 1rem;

    .eltable {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

}

//分页
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1.5rem;

    :deep(.el-pager li.is-active) {
        color: #1ABC9C;
    }

    :deep(.el-pager li:hover) {
        color: #1ABC9C;

    }

    :deep(.el-pagination button:hover) {
        color: #1ABC9C;
    }
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 1rem;
}

.demo-pagination-block .demonstration {
    margin-bottom: 1.3rem;
}

.el-dialog {
    .dialogFrom {
        display: flex;
        justify-content: space-between;

        .el-input {
            width: 25.6rem;
            height: 3.2rem;
        }

        .pullmenu11 {
            width: 11rem;
            height: 3.2rem;
        }

        .pullmenu22 {
            margin-left: 1rem;
            width: 11rem;
            height: 3.2rem;
        }

        .orangnization {
            width: 23rem;
        }

        .tag {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            width: 32rem;

            .el-check-tag {
                margin-left: 0.4rem;
                margin-bottom: 1rem;
                width: 5.2rem;
                height: 2rem;
                font-size: 1rem;
                line-height: 2rem;
                font-weight: normal;
                text-align: center;
                border: 1px solid rgb(203, 203, 203);
                padding: 0.1rem;

                &:hover {
                    color: rgb(0, 121, 254);
                    border: 1px solid rgb(0, 121, 254);
                    background: rgba(0, 121, 254, 0.1);
                    cursor: pointer;
                }
            }

        }

        .fromRight {
            // margin-right: 1.6rem;

            .frame {
                :deep(.el-transfer__buttons) {
                    width: 4rem;
                    height: 6rem;
                    padding: 0;
                }

                :deep(.el-transfer__button:nth-child(1)) {
                    padding: 1.2rem;
                    margin: 0 0 0 0.3rem;
                    width: 1.2rem;
                    height: 1.2rem;
                    border-radius: 50%;
                    margin-left: 0.7rem;

                }

                :deep(.el-transfer__button:nth-child(2)) {
                    width: 1.2rem;
                    height: 1.2rem;
                    border-radius: 50%;
                    margin-top: 1rem;
                    padding: 1.2rem;
                    margin: 0.3rem 0 0 0.3rem;
                    margin-left: 0.7rem;

                }

                :deep(.el-transfer-panel) {
                    width: 10.5rem;

                }

                :deep(.el-transfer-panel__body) {
                    height: 17rem;

                }

                :deep(.el-transfer-panel__list:nth-child(1)) {
                    overflow: auto
                }

                :deep(.el-transfer-panel__filter) {
                    padding: 0.4rem;

                }

                :deep(.el-input__wrapper) {
                    height: 2.5rem;
                    border-radius: 2rem;
                }

                :deep(.el-checkbox__label) {
                    color: #757474;
                    font-size: 1rem;
                }
            }
        }

    }

    .fromLeft {
        margin-left: 2rem;
    }
}

:deep(.el-textarea__inner) {
    padding-left: 10rem;
    height: 12.5rem;
    width: 60rem;
}

:deep(.el-dialog__body) {
    height: 25rem;
    overflow: auto;
    position: relative;
}

:deep(.el-dialog__header) {
    background-color: rgb(242, 242, 242);
    width: 69.4rem;
}

:deep(.el-dialog__footer) {
    border-top: 1px solid #e5e5e5;

}


//操作按钮颜色
.colorBtn {
    color: #1ABC9C;

    &:hover {
        color: rgba(26, 188, 156, 0.4);
    }
}

//重置按钮
.reset {
    margin-right: 0.3rem;
}


.required-label::before {
    content: "*";
    color: red;
    margin-top: 0.7rem;
}

//删除选择按钮
.selectBtn {
    width: 10rem;
    margin: 1px auto
}
</style>